// 淡入
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    50% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    50% {opacity: 0;}  
    100% {opacity: 1;}  
}  
//淡出
@keyframes fade-out {  
    0% {opacity: 1;}/*初始状态 透明度为0*/  
    50% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 0;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-out {/*针对webkit内核*/  
    0% {opacity: 1;}  
    50% {opacity: 0;}  
    100% {opacity: 0;}  
}  
//星动
@keyframes fade {  
    0% {opacity: 1;}/*初始状态 透明度为0*/  
    50% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade {/*针对webkit内核*/  
    0% {opacity: 1;}  
    50% {opacity: 0;}  
    100% {opacity: 1;}  
}  
//心跳
@keyframes duang {
   0%{
                transform: scale(1,1);  /*开始为原始大小*/
            }
            25%{
                transform: scale(0.8,0.8); /*放大1.1倍*/
            }
            50%{
                transform: scale(1,1);
            }
            75%{
                transform: scale(0.8,0.8);
   }
}

@-webkit-keyframes duang {/*针对webkit内核*/  
          0%{
              transform: scale(1,1);  /*开始为原始大小*/
          }
          25%{
              transform: scale(0.8,0.8); /*放大1.1倍*/
          }
          50%{
              transform: scale(1,1);
          }
          75%{
              transform: scale(0.8,0.8);
          }
}  
//太空浮动
@keyframes bounce {
   0% {
       				bottom: 2px;
       			}
       
       			25% {
       				bottom: 4px;
       			}
       
       			50% {
       				bottom: 6px;
       			}
       
       			75% {
       				bottom: 4px;
       			}
       
       			100% {
       				bottom: 2px;
       			}
}

@-webkit-keyframes bounce {/*针对webkit内核*/  
     0% {
         				bottom: 2px;
         			}
         
         			25% {
         				bottom: 4px;
         			}
         
         			50% {
         				bottom: 6px;
         			}
         
         			75% {
         				bottom: 4px;
         			}
         
         			100% {
         				bottom: 2px;
         			}
}  

//抖动
@keyframes shake {
   0%,
   100% {
       transform: translateX(0)
   }
   
   10% {
       transform: translateX(-9px)
   }
   
   20% {
       transform: translateX(8px)
   }
   
   30% {
       transform: translateX(-7px)
   }
   
   40% {
       transform: translateX(6px)
   }
   
   50% {
       transform: translateX(-5px)
   }
   
   60% {
       transform: translateX(4px)
   }
   
   70% {
       transform: translateX(-3px)
   }
   
   80% {
       transform: translateX(2px)
   }
   
   90% {
       transform: translateX(-1px)
   }
}

@-webkit-keyframes shake {
 0%,
 100% {
     transform: translateX(0)
 }
 
 10% {
     transform: translateX(-9px)
 }
 
 20% {
     transform: translateX(8px)
 }
 
 30% {
     transform: translateX(-7px)
 }
 
 40% {
     transform: translateX(6px)
 }
 
 50% {
     transform: translateX(-5px)
 }
 
 60% {
     transform: translateX(4px)
 }
 
 70% {
     transform: translateX(-3px)
 }
 
 80% {
     transform: translateX(2px)
 }
 
 90% {
     transform: translateX(-1px)
 }
}

@keyframes Popup {
    0% {
        opacity: 0;
        transform: scale(.2)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}
@keyframes Shrink {
    0% {
        opacity: 0;
        transform: scale(1)
    }

    100% {
        opacity: 1;
        transform: scale(.2)
    }
}



@keyframes slideright {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideleft {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slidebottom {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slidetop {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
		
    }
}

@keyframes rotate {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}




// 过渡动画重复
.louis-infinite{
	animation-iteration-count: infinite !important;
}

//相反的过渡动画
.louis-animation-reverse {
    animation-direction: reverse !important
}

@for $i from 0 to 10 {
	.louis-fade-in-#{$i} {
		animation: fade-in;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:fade-in $i+s;/*针对webkit内核*/ 
	}
	.louis-fade-out-#{$i} {
		animation: fade-out;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:fade-out $i+s;/*针对webkit内核*/ 
	}
	.louis-fade-#{$i} {
		animation: fade;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:fade $i+s;/*针对webkit内核*/ 
	}
	.louis-duang-#{$i}{
		animation: duang;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:duang $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-bounce-#{$i}{
		animation: bounce;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:bounce $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-shake-#{$i}{
		animation: shake;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:shake $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-popup-#{$i}{
		animation: Popup;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:Popup $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-shrink-#{$i}{
		animation: Shrink;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:Shrink $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-slide-top-#{$i}{
		animation: slidetop;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:slidetop $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-slide-bottom-#{$i}{
		animation: slidebottom;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:slidebottom $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-slide-left-#{$i}{
		animation: slideleft;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:slideleft $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-slide-right-#{$i}{
		animation: slideright;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:slideright $i+s;/*针对webkit内核*/
		position: relative;
	}
	.louis-rotate-#{$i}{
		animation: rotate;/*动画名称*/
		animation-duration: $i+s;/*动画持续时间*/  
		-webkit-animation:rotate $i+s;/*针对webkit内核*/
		position: relative;
	}
}

